<template>
  <div class="video-player">
    <video
      ref="video"
      class="video-main"
      :src="src"
      type="video/mp4"
      autoplay
      @waiting="onWaiting"
      @playing="onPlaying"
      @pause="onPause"
      @timeupdate="onTimeUpdate"
    />

    <div class="custom-controls">
      <div class="btns">
        <div class="left">
          <i
            class="switch-btn"
            :class="playIconName"
            @click="toggleVideoPlay"
          />
          <span>
            {{ timeFilter(currentTime) }}/{{ timeFilter(duration) }}
          </span>
        </div>
        <div class="right">
          <el-select
            v-model="definition"
            @change="setDefinition"
            size="mini"
            style="width: 70px"
            popper-class="speed-popper"
          >
            <el-option
              v-for="item in videoType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="speed"
            @change="setRate"
            size="mini"
            style="width: 60px"
            popper-class="speed-popper"
          >
            <el-option
              v-for="item in speedList"
              :key="item"
              :label="'x' + item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="down">
        <el-slider
          v-model="percent"
          :format-tooltip="timeFilter"
          @change="sliderOnChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { isNumber, isValid } from '@nily/utils'
export default {
  name: 'video-player',
  components: {},
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      playing: false,
      isFullscreen: false,
      // 视频进度
      currentTime: 0,
      // 视频总时长
      duration: 0,
      percent: 0,
      // 视频清晰度
      definition: 'normal',
      speed: 1,
      videoType: [
        {
          label: '普通',
          value: 'normal'
        },
        {
          label: '高清',
          value: 'hd'
        }
      ],
      speedList: [1, 2, 4, 8]
    }
  },
  computed: {
    playIconName() {
      return this.playing ? 'el-icon-video-pause' : 'el-icon-video-play'
    }
  },
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {
    this.$refs.video.pause()
    this.src = ''
  },
  destroyed() {},
  methods: {
    // 当媒介已停止播放但打算继续播放时
    onWaiting() {
      this.loading = true
    },
    //当媒介已开始播放时运行的脚本。
    onPlaying() {
      this.loading = false
      this.playing = true
    },

    // 当媒介被用户或程序暂停时运行的脚本。
    onPause() {
      this.playing = false
    },
    onTimeUpdate() {
      this.currentTime = this.$refs.video.currentTime
      this.duration = this.$refs.video.duration

      if (isNumber(this.duration) && this.duration > 0) {
        this.$nextTick(() => {
          this.percent = 100 * (this.currentTime / this.duration)
        })
      }
    },
    toggleVideoPlay() {
      if (this.$refs.video.paused) {
        this.$refs.video.play()
      } else {
        this.$refs.video.pause()
      }
    },
    setDefinition(val) {
      this.definition = val
    },
    setRate(val) {
      this.$refs.video.playbackRate = val
    },
    sliderOnChange(percent) {
      this.$refs.video.currentTime = (percent / 100) * this.duration
    },
    timeFilter(val) {
      if (!val) {
        return '0:00'
      }

      const mm = parseInt(val / 60)
      const ss = parseInt(val - mm * 60)

      if (ss < 10) {
        return `${mm}:0${ss}`
      }

      return `${mm}:${ss}`
    }
  },
  filters: {}
}
</script>
<style lang="scss">
.video-player {
  height: 100%;
  position: relative;

  .video-main {
    width: 100%;
    height: 100%;
    border-radius: 20px;
  }
  &:hover {
    .custom-controls {
      display: block;
      z-index: 3;
    }
  }
  .custom-controls {
    height: 70px;
    width: 100%;
    display: none;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 0 0 20px 20px;

    .switch-btn {
      font-size: 16px;
      cursor: pointer;
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .el-select {
        .el-input__inner {
          background-color: transparent;
          color: #fff;
        }
      }
    }
  }
}
</style>
